<template>
  <el-container>
    <el-header>
      <div>
        <img src="../assets/logo.png" alt="logo" />
        <span>电商后台管理系统</span>
      </div>
      <el-button type="danger" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <Button class="triggleButon" @click="triggerMenu">|||</Button>
        <!-- 菜单栏 -->
        <el-menu
          :default-active="path"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="rgb(0,165,251)"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
        >
          <!-- 一级菜单栏 -->
          <el-submenu :index="'/' + item.path" v-for="item in MenuList" :key="item.id">
            <template slot="title">
              <i :class="icons[item.id]"></i>
              <span>{{item.authName}}</span>
            </template>

            <!-- 二级菜单栏 -->
            <el-menu-item :index="'/'+cItem.path" v-for="cItem in item.children" :key="cItem.id">
              <template>
                <i class="el-icon-menu"></i>
                <span>{{cItem.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { reqMenuList } from "../api/index";
export default {
  data () {
    return {
      // 左侧菜单数据
      MenuList: [],
      // 左侧的图标
      icons: {
        125: "iconfont icon-users",
        103: "iconfont icon-tijikongjian",
        101: "iconfont icon-shangpin",
        102: "iconfont icon-danju",
        145: "iconfont icon-baobiao"
      },
      isCollapse: false
    };
  },
  methods: {
    // 退出登录
    logout () {
      if (confirm("您确定要退出吗？") == true) {
        // 清除sessionStorage
        window.sessionStorage.clear();
        // 跳转到登录页面
        this.$router.replace("login");
        // 提示退出成功
        this.$message.success("登出成功");
      } else {
        return false;
      }
    },

    // 获取菜单栏的列表数据
    async getMenuList () {
      // 发送请求获取列表数据
      const result = await reqMenuList()
      if (result.meta.status === 200) {
        this.MenuList = result.data
      } else {
        this.$message.error(result.meta.msg)
      }
    },

    // 点击按钮实现收缩和展开菜单栏
    triggerMenu () {
      this.isCollapse = !this.isCollapse
    }
  },
  created () {
    this.getMenuList();
  },
  computed: {
    path () {
      if (this.$route.path === '/addgood' || this.$route.path.includes('/editgood')) {
        return '/goods'
      } else {
        return this.$route.path
      }
    }
  }
};
</script>

<style lang="less" scoped>
.el-container {
  width: 100%;
  height: 100%;

  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 25px;
    background-color: #555;

    > div {
      display: flex;
      align-items: center;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        margin-left: 15px;
      }
    }
  }

  .el-aside {
    background-color: rgb(84, 92, 100);
    color: #333;

    .triggleButon {
      width: 100%;
      background-color: rgb(105, 111, 117);
      border: 0;
      letter-spacing: 0.2em;
      color: #fff;
    }

    .el-menu {
      border: none;
    }

    .iconfont {
      margin-right: 10px;
    }
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
  }
}
</style>

/**
=================35==================
动态请求菜单栏数据
created() {
      this.getMenuList();
    }

=================36==================
1. 修改选中项的颜色item
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">


2. 遍历 v-for【可以尝试使用map或reduce】 渲染一级和二级菜单并且添加图标
一级图标需要动态渲染

=================37==================
1. 每次只能打开一个菜单项 unique-opened
看文档

2. 解决边框问题

=================38==================
1. 左侧菜单栏的折叠与展开 collapse
  (1). 放置一个按钮
    样式：letter-spacing: 0.2em; cursor:pointer;
  (2). 点击按钮切换菜单的折叠与展开
    看文档找折叠展开属性，去除折叠展开动画，且需要关联menu的width，可通过判断是否显示width="200px"

==================39==================
首页路由重定向到welcome组件
  即：在Main区域显示welcome组件
  (1). 在路由组件的HOME中添加children数组属性，然后添加welcome组件
  (2). 路由组件中将 /home 重定向到 /welcome
  (3). 在HOME 组件中放置路由占位符 <router-view></router-view>

===================40==================
左侧菜单栏链接改造为路由链接 ===> 点击菜单栏时，右侧主题区域出现对应的路由组件
  一般是通过<router-link ></router-link>,
  但在菜单栏这个组件中可以查文档发现添加router可以启用该模式会在激活导航时以 index 作为 path 进行路由跳转；
  可能需要修改地址栏的名字，传path而不是id

=====================41================
用户列表组件
(1). 创建 Users.vue 组件
(2). 在路由组件中添加用户列表组件【且该组件是嵌套在HOME中的，需要在HOME中添加children数组属性(如果有数组可直接添加)，然后添加user组件】


====================42==================
菜单栏选中样式 default-active
！！!注意:一定要设置el-submenu的index属性（1，2，3…）或则 /users,/roles 等，路径记得有/,不然会出bug

方法一：
1. 点击链接的时候【绑定点击事件】将path保存到sessionStorage中
2. 当HOME组件刚创建的时候立即将值取出赋值给左侧菜单栏

方法二：
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :default-active="$route.path">

方法三：
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :default-active="this.$router.history.current.path">


*/
